<template>
  <el-row style="margin-left: 10px">
    <el-tooltip :content="$tr('New Route')">
      <el-button @click="showNewGraphDialog">+</el-button>
    </el-tooltip>
    <el-tooltip :content="$tr('Open system file browser')">
      <el-button @click="openFolder('cwd')">
        <el-icon>
          <folder-opened />
        </el-icon>
      </el-button>
    </el-tooltip>
  </el-row>

  <el-tree :data="data" :props="defaultProps">
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <!-- 显示当前打开的文件。注意，这里的逻辑还需要理清。 -->
        <span v-if="node.data.label === currentGraph"
          ><b>{{ node.label }}</b></span
        >
        <span v-else>{{ node.label }}</span>
        <span>
          <el-button @click="open(data)" type="primary" size="small">
            Open</el-button
          >
        </span>
      </span>
    </template>
  </el-tree>
  <el-dialog v-model="newSubgraphDialogShow">
    <p>Input the name of the new route:</p>
    <el-input v-model="newRouteName"></el-input>
    <template #footer>
      <span>
        <el-button @click="newSubgraphDialogShow = false">Cancel</el-button>
        <el-button type="primary" @click="onNewGraph">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getChartsMeta, getChart } from "@/api/cards";
import {
  onBeforeMount,
  ref,
  defineExpose,
  defineEmits,
  defineProps,
  onMounted,
} from "vue";
import { FolderOpened } from "@element-plus/icons-vue";
import { Chart, ChartMeta } from "@/components/flowchart/models";
import { emitLoad, setOnLoadChartByName } from "../EventBus";
import { openFolder } from "@/api/cards";
const data = ref<ChartMeta[]>([]);
const newSubgraphDialogShow = ref(false);
const newRouteName = ref("");

onBeforeMount(async () => {
  await update();
});

const update = async () => {
  const chartsMeta = await getChartsMeta();
  data.value = chartsMeta;
};

const open = async (data: ChartMeta) => {
  const chart = await getChart(data.fileName, "file_name");
  emitLoad(chart);
};

defineExpose({ update });
const props = defineProps({
  currentGraph: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["new-graph"]);
const showNewGraphDialog = () => {
  newRouteName.value = "";
  newSubgraphDialogShow.value = true;
};

const onNewGraph = () => {
  emit("new-graph", newRouteName.value);
  newSubgraphDialogShow.value = false;
};

const findMainGraph = async () => {
  const mainChart = data.value.find(
    (meta: ChartMeta) => meta.chartType == "main"
  );
  if (mainChart == null) {
    console.error(data.value);
    throw Error("出现错误，未寻找到主图");
  }
  const chart = await getChart(mainChart?.fileName, "file_name");
  emitLoad(chart);
};

const getChartMetaByName = (chartName: string) => {
  return data.value.find((cm: ChartMeta) => {
    if (chartName == "main") {
      if (cm.chartType == "main") {
        return true;
      }
    } else {
      if (cm.label == chartName) {
        return true;
      }
    }
    return false;
  });
};

onMounted(() => {
  window.setTimeout(findMainGraph, 500);

  setOnLoadChartByName((graphName: string) => {
    const chartMeta = getChartMetaByName(graphName);
    if (chartMeta == null) {
      throw Error("chart meta not found for graph name: " + graphName);
    }
    getChart(chartMeta.fileName, "file_name").then((chart) => {
      emitLoad(chart);
    });
  });
});
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
